﻿@model PageTechnologyList
@{
    ViewBag.Title = Model.PageMeta != null ? Model.PageMeta.Title : Model.Technology.Title;
}
@section header{
    @if (Model.PageMeta != null)
    {
        <meta name="keywords" content="@Model.PageMeta.Keyword" />
        <meta name="description" content="@Model.PageMeta.Description" />
    }

    <link href="~/plugins/Swiper/dist/css/swiper.min.css" rel="stylesheet" />
}

<div class="wrapper">
    <header class="page-header">
        <div class="container-fluid">

            <a href="/" class="top-logo">
                <div class="text visible-lg">
                    <h2> 品牌周边及礼品定制服务商</h2>
                    <p>Brand Peripherals &amp; Customized Gift Service</p>
                </div>
            </a>

            <div class="leftcol">
                <div class="menu-toggle">
                    <div class="one"></div>
                    <div class="two"></div>
                    <div class="three"></div>
                </div>
                <h2 class="title visible-lg visible-md">工艺细节介绍</h2>
                <nav class="topnav">
                    <ul>
                        @foreach (var item in Model.Technologies)
                        {
                            if (Model.Technology.Id == item.Id)
                            {
                                <li><a href="@Url.Action("Technology",new { id = item.ProductId,techId= item.Id})" class="active">@item.Title</a></li>
                            }
                            else
                            {
                                <li><a href="@Url.Action("Technology",new { id = item.ProductId,techId= item.Id})">@item.Title</a></li>
                            }

                        }
                    </ul>
                </nav>
            </div>

        </div>
    </header>
    <main class="container-fluid product-detail">
        <div class="row">
            <div class="col-md-9  col-md-push-3">
                <div class="photo">
                    <!-- Swiper -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            @{
                                var images = Model.Technology.ImagesURL.Split('|');

                            }

                            @foreach (var item in images)
                            {
                                <div class="swiper-slide"><img src="@item" alt=""></div>
                            }

                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next"><i class="iconfont icon-next"></i></div>
                        <div class="swiper-button-prev"><i class="iconfont icon-prev"></i></div>
                    </div>


                </div>
            </div>
            <div class="col-md-3  col-md-pull-9">
                <div class="detail">
                    <aside class="leftdes">
                        <header class="hidden-xs hidden-sm">
                            <a href="@Url.Action("Detail",new { id=Model.Technology.ProductId})" class="back">
                                返回上级
                            </a>
                        </header>
                        <h3>@Model.Technology.Title / @Model.Technology.EnglishTitle</h3>
                        @Html.Raw(Model.Technology.Body)


                    </aside>
                </div>
            </div>


        </div>
    </main>
</div>

<a href="@Url.Action("Detail","Product",new { id= Model.Technology.ProductId })" class="fixedback hidden-md hidden-lg"><i class="iconfont icon-fanhui1"></i></a>



@section footer{
    <script src="~/plugins/Swiper/dist/js/swiper.jquery.min.js"></script>
    <script src="~/plugins/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <script>
    //var initialization = function () {
    //    var winHeight = $(window).height(), headerHeight = $(".page-header").height(), footerHeight = $(".page-footer").height();
    //    var midHeight = (winHeight - headerHeight - footerHeight - 46);
    //   // var imgHeight = $(".photo img").height();

    //    //if (midHeight > imgHeight) {
    //    //    $(".photo .swiper-slide").css({ "height": imgHeight + "px" });
    //    //    $(".detail").css({ "height": imgHeight + "px" });
    //    //    var paddingTop = (midHeight - imgHeight) / 2;
    //    //    $(".product-detail").css({ "padding-top": paddingTop + "px" });
    //    //} else {
    //        $(".photo .swiper-slide").css({ "height": midHeight + "px" });
    //        $(".detail").css({ "height": midHeight + "px" });
    //    //}
    //}



    $(function () {

        //if (Modernizr.mq('(min-width: 992px)')) {
        //    initialization();
        //} else {
        //    $(".photo").css({ "height": "auto" });
        //    $(".detail").css({ "height": "auto" });
        //}

        //$(window).resize(function () {

        //    if (Modernizr.mq('(min-width: 992px)')) {
        //        initialization();
        //    } else {
        //        $(".photo").css({ "height": "auto" });
        //        $(".detail").css({ "height": "auto" });
        //    }

        //})

        $('.swiper-container').swiper({
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        });


        $(".menu-toggle").on('click', function () {
            $(this).toggleClass("on");
            if ($('.topnav').hasClass("on")) {
                $('.topnav').fadeOut(function () {
                    $('.topnav').removeClass("on");
                })
            } else {
                $('.topnav').addClass("on");
                $('.topnav').fadeIn();
            }

        });


    });
    $(window).on("load", function () {
        $(".detail").mCustomScrollbar();
    });


    </script>

}
